<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				width: 300px;
				border-radius: 50%;
				border: 1px solid hotpink;
				transition: all 2s;
				
			}
			img:hover {
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<h2>2D转换之rotate旋转</h2>
		<h2>配合过渡transition就可以做出旋转的动画了</h2>
		<ul>
			<li>transform:rotate(度数);</li>
			<li>rotate里面跟度数，单位是deg 比如rotate(45deg)</li>
			<li>角度为正时顺时针旋转，角度为负时，逆时针旋转</li>
			<li>默认旋转的中心点是元素的中心点</li>
		</ul>
		<img src="../images/images/xuanzhuan.png" >
	</body>
</html>
